<div ng-controller="ProfileEntryController">
    <table cellspacing="0" style="width: 98%"
           class="table table-hover table-condensed table-border-bottom font-95em"
           ng-class="{'opacity_4':loadingPage}">
        <thead>
        <tr data-ng-if='folder && folder.entries.length > 0'>
            <th ng-click="sort('type')" class="entry-table-header">
                <span>TYPE</span>
                <i ng-if="params.sort!=='type'" class="sortable fa fa-angle-down"></i>
                <i ng-show="params.sort=='type'" style="font-size: 14px;" class="fa opacity_4"
                   ng-class="{'fa-angle-down':params.asc==false, 'fa-angle-up':params.asc==true}"></i>
            </th>
            <th ng-click="sort('part_id')" class="entry-table-header"
                    >
                <span>Part ID</span>
                <i ng-if="params.sort!=='part_id'" class="sortable fa fa-angle-down"></i>
                <i ng-show="params.sort=='part_id'" style="font-size: 14px" class="fa opacity_4"
                   ng-class="{'fa-angle-down':params.asc==false, 'fa-angle-up':params.asc==true}"></i>
            </th>
            <th data-ng-click="sort('name')" class="entry-table-header"
                    >
                <span>Name</span>
                <i ng-if="params.sort!=='name'" class="sortable fa fa-angle-down"></i>
                <i ng-show="params.sort=='name'" style="font-size: 14px" class="fa opacity_4"
                   ng-class="{'fa-angle-down':params.asc==false, 'fa-angle-up':params.asc==true}"></i>
            </th>
            <th></th>
            <th ng-click="sort('status')" class="entry-table-header">
                <span style="font-size: 11px; text-transform: uppercase">Status</span>
                <i ng-if="params.sort!=='status'" class="sortable fa fa-angle-down"></i>
                <i ng-show="params.sort=='status'" style="font-size: 14px" class="fa opacity_4"
                   ng-class="{'fa-angle-down':params.asc==false, 'fa-angle-up':params.asc==true}"></i>
            </th>
            <th style="width:100px;">
                <i class="fa fa-flask fa-fw" style="font-size: 14px; "></i>
                <img src="img/dna.svg" width="15px" alt="has dna"/>
            </th>
            <th ng-click="sort('created')" class="entry-table-header">
                <span style="font-size: 11px; text-transform: uppercase">Created</span>
                <i ng-show="params.sort=='created'" style="font-size: 14px" class="fa opacity_4"
                   ng-class="{'fa-angle-down':params.asc==false, 'fa-angle-up':params.asc==true}"></i>
                <i ng-if="params.sort!=='created'" class="sortable fa fa-angle-down"></i>
            </th>
        </tr>

        <tr data-ng-show='!folder'>
            <td colspan="10">
                <img alt="Loading..." src="img/loader-mini.gif"/>
                Loading...
            </td>
        </tr>
        <tr data-ng-show="folder.entries.length == 0">
            <td colspan="10">No entries available</td>
        </tr>
        </thead>
        <tbody>
        <tr data-ng-repeat="entry in folder.entries" style="vertical-align: middle">
            <td style="opacity:0.7; font-weight: bold; font-size: 0.85em; text-shadow: 0 1px 0 #fff">
                {{entry.type | uppercase}}
            </td>
            <td><a ng-href="entry/{{entry.id}}" class="cell_mouseover form-group"
                   popover-trigger="mouseenter" ng-mouseover="tooltipDetails(entry)"
                   uib-popover-template="profileEntryPopupTemplate" popover-placement="right">{{entry.partId}}</a>
            </td>
            <td>
                <div title="{{entry.name}}" class="ellipsis" style="width: 350px">{{entry.name}}</div>
                <div title="{{entry.shortDescription}}" class="small"
                     style="opacity: 0.5; width: 350px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis;">
                    {{entry.shortDescription}}
                </div>
            </td>
            <td style="vertical-align: middle">
                <small style="opacity: 0.4">
                    <ng-pluralize count="entry.viewCount" when="{'0': '', '1': '1 view', 'other':'{} views'}">
                    </ng-pluralize>
                </small>
            </td>
            <td style="vertical-align: middle; width:80px; white-space:nowrap">
                <span class="label" ng-class="{
                'ice-label-success':entry.status=='Complete',
                'label-default': entry.status=='In Progress',
                'ice-label-danger': entry.status=='Abandoned',
                'ice-label-info': entry.status=='Planned'}">{{entry.status | capitalize}}
                </span>
            </td>
            <td style="vertical-align: middle;">
                <i ng-show="entry.hasSample" class="fa fa-flask fa-fw"
                   style="color: #555; font-size: 14px;"></i>
                <i ng-show="!entry.hasSample" class="fa fa-square fa-fw"
                   style="opacity: 0; font-size: 14px;"></i>
                <img ng-show="entry.hasSequence" src="img/dna.svg" width="15px"/>
            </td>
            <td style="width:110px; white-space:nowrap; vertical-align: middle;">
                {{entry.creationTime | date:'MMM d, yyyy'}}
            </td>
        </tr>
        </tbody>
    </table>

    <div ng-if="folder && folder.entries.length > 0" style="margin-top: -15px">
        <div class="col-md-6" style="padding-left: 0">
            <uib-pagination total-items="folder.count" ng-change="userEntriesPageChanged()"
                            ng-model="params.currentPage"
                            max-size="maxSize" class="pagination-sm" items-per-page="15"
                            boundary-links="true"></uib-pagination>
        </div>
        <div class="col-md-4" style="margin-top: 20px;"><strong class="small">
            <i ng-show="loadingPage" class="fa fa-spin fa-gear opacity_4"></i> {{pageCounts(params.currentPage,
            folder.count)}}</strong>
        </div>
    </div>

    <br clear="all"><br><br><br>
</div>
